<template>
	<view class="page">
		<view class="content">
			<view class="" style="margin-bottom: 50rpx;">
				<view :style="{top: statusBarHeight+10 +'px'}">
					<u-icon name="close" size="30" @click="navTo"></u-icon>
				</view>
			</view>
			<view class="text-center flex justify-center" style="margin:70rpx 0">
				<image src="https://ssjh.jifenma.com/assets/img/logo_gxxq.png" style="width: 200rpx;" mode="widthFix"></image>
			</view>
			<view class="" v-if="loginPwd">
				<u-form :model="form" ref="uForm" label-position="left"
					:labelStyle="{fontSize: '32rpx', fontWeight: 'bold',color: '#333'}">
					<u-form-item prop="mobile" left-icon="../static/login/phone.png"
						:left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
						<u-input v-model="form.mobile" type="number" placeholder="请输入手机号码" />
						<!-- ios键盘兼容问题 -->
						<input style="display:none;" type="password">
					</u-form-item>
					<u-form-item prop="password" left-icon="../static/login/password.png"
						:left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
						<u-input placeholder="请输入登录密码" v-model="form.password" type="password" />
					</u-form-item>
				</u-form>
			</view>
			<view class="" v-else>
				<u-form :model="form" ref="uForm" label-position="left"
					:labelStyle="{fontSize: '32rpx', fontWeight: 'bold',color: '#333'}">
					<u-form-item prop="mobile" left-icon="../static/login/phone.png"
						:left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
						<u-input v-model="form.mobile" type="number" placeholder="请输入手机号码" />
					</u-form-item>
					<u-form-item prop="captcha" left-icon="../static/login/password.png"
						:left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
						<view class="flex flex-1">
							<u-input class="flex-1" v-model="form.captcha" placeholder="请输入短信验证码" />
							<dy-phone-code-button :mobile="form.mobile" type='1'></dy-phone-code-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="flex align-end justify-end u-p-t-40 u-p-r-74">
			<text class="font-28" style="color:var(--mainColor)" v-if="loginPwd" @click="loginChange">手机号快捷登录</text>
			<text class="font-28" style="color:var(--mainColor)" v-else @click="loginChange">账号密码登录</text>
		</view>
		<view class="flex flex-column align-center" style="padding-top: 100rpx;">
			<dy-button width="576rpx" size="default" fontSize="30rpx" fontWeight="700" color="#fff"
				:backgroundColor="'var(--mainColor)'" @click="subBt">登录</dy-button>
			<!-- #ifdef MP-WEIXIN -->
			<dy-button class="u-m-t-20" width="576rpx" size="default" color="#333333" backgroundColor="#f8f8f8"
				borderColor="#dedede" @click="toLoginWeixin">微信快捷登录</dy-button>
			<!-- #endif -->
			<view class="flex justify-between u-m-t-30" style="width: 576rpx;">
				<navigator class="u-font-28" url="/pages/login/forgetPwd/forgetPwd">忘记密码</navigator>
				<navigator class="u-font-28" url="/pages/login/register/register">注册账号</navigator>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="u-m-t-50"> 
				<u-icon name="weixin-circle-fill" size="80" color="#00c800" @click="weixinLogin"></u-icon>
			</view>
			<!-- #endif --> 
			<view class="u-m-t-30">
				<u-checkbox shape="circle" v-model="checked">
					<text>登录前请阅读以下条款</text>
					<text class="text-primary" @click.stop="toArgu('register_credit')">《用户服务协议》</text>
				</u-checkbox>
				<view class="text-center">
					<text class="text-primary" @click.stop="toArgu('privacy_agreement')">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BaseCenterApi
	} from "@/api/serves.js"
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				loginPwd: true,
				form: {
					mobile: '',
					password: '',
					captcha: ''
				},
				loading: false,
				checked: false,
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (this.$u.test.mobile(value)) {
									callback();
								} else {
									callback(new Error("请输入正确的手机号码"));
								}
							},
						},
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change',
						trigger: ['blur'],
					}],
					captcha: [{
						required: true,
						message: '请输入6位数验证码',
						trigger: 'change',
						trigger: ['blur'],
					}],
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			...mapMutations({
				SET_USER_INFO: 'user/SET_USER_INFO',
				SET_USER_TOKEN: 'user/SET_USER_TOKEN',
			}),
			...mapActions({
				getUserInfo: 'user/getUserInfo'
			}),
			navTo() {
				uni.switchTab({
					url: "/pages/tabbar/index/index"
				})
			},
			toLoginWeixin() {
				uni.redirectTo({
					url: "/pages/login/login/loginWeixin"
				})
			},
			loginChange() {
				this.loginPwd = !this.loginPwd
				this.$refs.uForm.resetFields()
			},
			subBt() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.checked) return this.$Toast('请同意隐私协议', 1500)
						console.log('验证通过');
						this.login()
					}
				});
			},
			login() {
				this.loading = true
				uni.showLoading()
				let fun = ''
				let params = {}
				if (this.loginPwd) {
					params.account = this.form.mobile
					params.password = this.form.password
					fun = 'pwdLogin'
				} else {
					params.mobile = this.form.mobile
					params.captcha = this.form.captcha
					fun = 'mobilelogin'
				}
				BaseCenterApi[fun](params).then(async res => {
					uni.removeStorageSync("tjid")
					console.log(res);
					uni.hideLoading()
					this.$u.toast(res.msg, 1500)
					this.loading = false
					if (res.code == 1) {
						this.SET_USER_TOKEN(res.data.token)
						await this.getUserInfo()
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/tabbar/index/index",
							});
						}, 1500);
					}
				})
			},
			// 微信登录
			weixinLogin() {
				this.$store.dispatch('user/weixinLogin');
			},
			toArgu(type) {
				uni.navigateTo({
					url: '/pages/login/registerArgu/registerArgu?type=' + type
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	.content {
		padding: 120rpx 74rpx 0;
	}
</style>